<template>
  <div class="product-banner-1">
    <div class="product-model">
      <div class="content f f-ac f-jc">
        <div class="content-box">
          <div class="f f-col f-jb">
            <div>
              <Title
                v-slide-up
                title="PRODUCTS & SERVICES"
                color="linear-gradient(90deg, #4580dd 0%, rgba(0, 0, 0, 0) 100%)"
                size="16"
                bold="700"
                :sub-title="info.name"
                sub-color="#0e0b31"
                sub-size="48"
                sub-bold="700"
                gap="10"
              />
              <div v-slide-up class="content-desc" v-html="info.introduce" />
            </div>
            <div v-slide-up class="btn-box" @click="handleContact">立即咨询</div>
          </div>
          <img v-slide-plus :src="info.image2" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["contact"]);

// 立即咨询
const handleContact = () => {
  emit("contact", `产品服务：${props.info.name}`);
};
</script>
<style lang="scss" scoped>
.product-banner-1 {
  width: 100%;
  height: 740px;
  background: url("../../../../assets/product/banner_block_bg.png") no-repeat;
  background-size: 427px 570px;
  background-position: right bottom;
  .product-model {
    width: 90%;
    margin: 0 auto;
    height: 740px;
    background: url("../../../../assets/product/banner_bg_1.png") no-repeat;
    background-size: 90% 683px;
    background-position: center;
    position: relative;
    .content {
      width: 100%;
      padding-top: 170px;
      height: 570px;
      .content-box {
        display: flex;
        width: 100%;
        > div {
          flex: 1;
          max-width: 50%;
        }
        img {
          width: 628px;
          height: 466px;
          margin-left: 120px;
          filter: drop-shadow(0 0 10px rgba(101, 101, 101, 0.5));
        }
        .content-desc {
          font-size: 16px;
          font-weight: 400;
          letter-spacing: 0.3px;
          line-height: 25.6px;
          color: #878599;
          margin-top: 30px;
        }
        .btn-box {
          width: 164px;
          height: 54px;
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #4580dd;
          &:hover {
            cursor: pointer;
            background-color: #3a6dc0;
          }
        }
      }
    }
  }
}
</style>
